<template>
	<view>
		<scroll-view scroll-x="true" class="sort-scroll">
			<view class="sort-list">
				<view v-for="(item,key) in sorts" :key="key" :class="key==type?'sort-tab-active':'sort-tab'"  @click="switchType(key)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="list">
			<view class="item" v-for="(item,key) in products" :key="key" @click="showDetail(item.id)">
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>
				<view class="item-info">
					<view class="item-title">
						<text>{{item.name}}</text>
						<text class="item-count">
							已售：{{item.volumn}}
						</text>
					</view>
					
					<view class="item-bottom">
						
						<text class="item-price">
							￥{{item.price}}
						</text>
						<image src="../../../static/store/add-cart.png" mode="" class="add-cart" @click.stop="addCart(item.id)"></image>
						
					</view>
				</view>
			</view>
		</view>
		<view class="cart-button" @click="showCartPage">
			<view class="cart-dot" v-show="cart_number>0">
				{{cart_number}}
			</view>
			<image src="../../../static/store/sort-cart.png" mode="" class="cart-icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			var isLogin=uni.getStorageSync("token")!=null&&uni.getStorageSync("token")!="";
			return {
				sorts:["乳霜","洁面","眼部","原液精华","乳霜","洁面","眼部","原液精华"],
				type:0,
				products:[],
				cart_number:0,
				isLogin:isLogin,
			};
		},
		onLoad:function(e){
			this.type=e.type?e.type:0;
			this.getProducts();
			this.getCartNumber();
		},
		methods:{
			switchType:function(type){
				this.type=type;
				this.getProducts();
			},
			getCartNumber:function(){
				var that=this;
				that.ajax("/store/cartnum/",{
					token:uni.getStorageSync("token"),
				},function(res){
					that.cart_number=res.data.data;
				});
			},
			addCart:function(id){
				var that=this;
				that.ajax("/store/addcart",{
					token:uni.getStorageSync("token"),
					id:id
				},function(res){
					that.cart_number=res.data.data;
					uni.showToast({
						title:"添加成功",
						icon:"success",
					})
				});
			},
			getProducts:function(){
				var that=this;
				that.ajax("/store/sort",{
					type:that.type
				},function(res){
					that.products=res.data.data;
				});
			},
			showDetail:function(id){
				uni.navigateTo({
					url:"/pages/product/detail/detail?type=product"+"&id="+id,
				});
			},
			showCartPage:function(){
				uni.navigateTo({
					url:"/pages/store/cart/cart"
				})
			}
		}
		
	}
</script>

<style>
	.nostyle{
		margin: 0;
		padding: 0;
		background: none;
		border:none;
		height: 55upx;
	}
	.nostyle:after{
		border:none;
	}
	.sort-scroll{
		box-shadow:0upx 4upx 26upx 0upx rgba(43,167,139,0.18);
	}
	.sort-list{
		background: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:10upx 20upx;
	}
	.sort-tab-active{
		margin-right: 20upx;
		box-shadow:0upx 4upx 22upx 0upx rgba(43,167,139,0.24);
		padding: 6upx 30upx;
		border-radius: 30upx;
		white-space: nowrap;
		font-size: 29upx;
	}
	.sort-tab{
		margin-right: 20upx;
		color: #4B4B4B;
		padding: 14upx 30upx;
		white-space: nowrap;
		font-size: 29upx;
	}
	.list{
		padding:20upx;
	}
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30upx;
		height: 220upx;
		position: relative;
	}
	.item-image{
		width: 223upx;
		height: 180upx;
		border-radius: 10upx;
		position: relative;
		z-index: 2;
	}
	.item-info{
		position: absolute;
		left: 185upx;
		right: 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 44upx 30upx 44upx 90upx;
		background: #ffffff;
		box-shadow:0upx 2upx 22upx 0upx rgba(43,159,133,0.14);
		border-radius:13upx;
	}
	.item-title{
		font-size: 31upx;
		display: flex;
		font-weight: 500;
		flex-direction: row;
		align-content: space-around;
	}
	.item-cart{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		align-items: flex-end;
	}
	.item-bottom{
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		align-content: space-around;
		align-items: flex-end; 
	}
	.item-price{
		flex: 1;
		font-size: 35upx;
		color: #ff340e;
		
	}
	.item-count{
		flex: 1;
		text-align: right;
		font-size: 22upx;
		color: #bcbcbc;
	}
	.add-cart{
		width: 44upx;
		height: 44upx;
	}
	.cart-button{
		position: fixed;
		bottom: 44upx;
		right: 0upx;
		height: 100upx;
		width: 100upx;
		background: #45AA8C;
		border-radius: 50upx;
		box-shadow:0px 7px 22px 0px rgba(51,176,139,0.58);
	}
	.cart-icon{
		width: 48upx;
		height: 40upx;
		margin-top: 30upx;
		margin-left: 26upx;
	}
	.cart-dot{
		position: absolute;
		top:-5upx;
		right: 0;
		background: #ffffff;
		border-radius: 20upx;
		font-size: 20upx;
		padding: 5upx 13upx;
		color: #FF7465;
		display: inline-block;
		border:1px solid #FF7465;
	}
</style>
